<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="query" slot="header" :inline="true" :model="queryParams" label-width="90px">
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model="queryParams.uuid" maxlength="6" show-word-limit clearable placeholder="请输入用户ID" />
			</el-form-item>
			<el-form-item label="手机号码:" prop="supplierMobile">
				<el-input v-model="queryParams.supplierMobile" clearable maxlength="11" show-word-limit placeholder="请输入手机号码" />
			</el-form-item>
			<el-form-item label="供应商名称:" prop="supplierName">
				<el-input v-model="queryParams.supplierName" clearable placeholder="请输入供应商名称" />
			</el-form-item>
			<el-form-item label="收支类型:" prop="types">
				<el-cascader ref="consigneeOps" v-model="queryParams.types" :options="options" @change="cascader"></el-cascader>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="创建日期:"></start-end-time>
		</el-form>

		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical class="!w-[242px] mr-[24px] flex items-center py-[12px] pb-[11px] !pl-[16px] !pr-[13px]" bg-color="linear-gradient(226deg, #606DD2 0%, #202EAC 100%)">
				<div class="flex flex-col text-white h-full w-full">
					<div class="font-bold text-[32px] h-[32px] leading-[32px] mb-[8px]">
						{{ details.settlement }}
					</div>
					<div class="text-white">
						<div class="font-bold text-[12px] !h-[17px] flex items-end">实时结算中货款总额</div>
					</div>
				</div>
			</l-statistical>
			<l-statistical class="!w-[242px] mr-[24px] flex items-center py-[12px] pb-[11px] !pl-[16px] !pr-[13px]" bg-color="linear-gradient(226deg, #606DD2 0%, #202EAC 100%)">
				<div class="flex flex-col text-white h-full w-full">
					<div class="font-bold text-[32px] h-[32px] leading-[32px] mb-[8px]">
						{{ details.income }}
					</div>
					<div class="text-white">
						<div class="font-bold text-[12px] !h-[17px] flex items-end">订单收入总额</div>
					</div>
				</div>
			</l-statistical>
			<l-statistical class="!w-[242px] mr-[24px] flex items-center py-[12px] pb-[11px] !pl-[16px] !pr-[13px]" bg-color="linear-gradient(226deg, #606DD2 0%, #202EAC 100%)">
				<div class="flex flex-col text-white h-full w-full">
					<div class="font-bold text-[32px] h-[32px] leading-[32px] mb-[8px]">
						{{ details.confirm }}
					</div>
					<div class="text-white">
						<div class="font-bold text-[12px] !h-[17px] flex items-end">确认收货总额</div>
					</div>
				</div>
			</l-statistical>
			<l-statistical class="!w-[242px] mr-[24px] flex items-center py-[12px] pb-[11px] !pl-[16px] !pr-[13px]" bg-color="linear-gradient(226deg, #606DD2 0%, #202EAC 100%)">
				<div class="flex flex-col text-white h-full w-full">
					<div class="font-bold text-[32px] h-[32px] leading-[32px] mb-[8px]">
						{{ details.expenditure }}
					</div>
					<div class="text-white">
						<div class="font-bold text-[12px] !h-[17px] flex items-end">订单支出总额</div>
					</div>
				</div>
			</l-statistical>
		</div>
		<template slot="options">
			<l-search @search="query" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table ref="goodsDown" v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" />
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="supplierMobile" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="供应商名称" prop="supplierName" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="收支类型" prop="type" min-width="120">
				<template slot-scope="scope">
					{{ scope.row.type == 1 ? '收入' : '支出' }}
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="货款类型" prop="operation" min-width="120">
				<template slot-scope="scope">
					{{
						scope.row.operation == 1
							? '订单收入'
							: scope.row.operation == 2
							? '确认收货'
							: scope.row.operation == 3
							? '提现'
							: scope.row.operation == 4
							? '提现拒绝'
							: scope.row.operation == 5
							? '订单支出'
							: '-'
					}}
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="变动前金额" prop="amount" min-width="120">
				<template slot-scope="scope">
					{{ scope.row.thenAmount - scope.row.amount }}
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="变动金额" prop="amount" min-width="120" />
			<el-table-column :formatter="emptyToNumber" align="center" label="变动后金额" prop="thenAmount" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="156px" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="left" fixed="right" header-align="center" label="操作" width="100px">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button type="primary" @click="showDetails(scope.row)">详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<l-dialog v-model="openDetails" :show-button="false" title="订单详情" width="780px" @close="handleClose">
			<div v-if="!only" class="content">
				<div class="title">订单信息</div>
				<div class="content-info">
					<div class="info">
						<div>订单号:{{ orderDetails.orderDetail.orderSn }}</div>
						<div>支付金额:{{ orderDetails.orderDetail.payAmount }}</div>
					</div>
					<div class="info info2">
						<div>下单时间:{{ orderDetails.orderDetail.generateTime ? orderDetails.orderDetail.generateTime.split('T').join(' ') : '' }}</div>
						<div>支付方式:{{ orderDetails.orderDetail.payType }}</div>
					</div>
					<div class="info info2">
						<div>订单状态:{{ orderDetails.orderDetail.orderStatus }}</div>
					</div>
				</div>
			</div>
			<div v-if="!only" class="content">
				<div class="title">商品信息</div>
				<div v-for="(item, index) in orderDetails.goodsInfo" :key="index" class="content-info">
					<div class="info" style="display: flex; align-items: center">
						<div style="">
							<el-image :preview-src-list="[item.picUrl]" :src="item.picUrl" :z-index="999999" style="width: 58px; height: 58px"> </el-image>
						</div>
						<div style="margin-left: 20px; margin-top: 0">
							<div style="">商品ID:{{ item.goodsId }}</div>
							<div style="margin-top: 10px">商品名称:{{ item.goodsName }}</div>
						</div>
					</div>
					<div class="info info2">
						<div>商品分类:{{ item.category }}</div>
						<div>订单类型:{{ item.orderType }}</div>
						<div>数量:{{ item.goodsNum }}</div>
					</div>
					<div class="info info2">
						<div>供应商名称:{{ item.supplierName }}</div>
						<div>供应商电话:{{ item.supplierPhone }}</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="title">用户信息</div>
				<div class="content-info">
					<div class="info">
						<div>用户ID:{{ orderDetails.userInfo.uuid }}</div>
						<div>收件人:{{ orderDetails.userInfo.consignee }}</div>
					</div>
					<div class="info info2">
						<div>手机号码:{{ orderDetails.userInfo.consigneePhone }}</div>
						<div>收件人手机:{{ orderDetails.userInfo.userPhone }}</div>
					</div>
					<div class="info info2">
						<div style="line-height: 24px">地址:{{ orderDetails.userInfo.address }}</div>
					</div>
				</div>
			</div>
		</l-dialog>
		<l-dialog v-model="openWithdraw" :show-button="false" title="提现审核" width="568px" @close="handleClose">
			<div class="withdraw">
				<div class="content-info">
					<div class="info info-plus">
						<div>
							<span class="label">供应商ID:</span><span class="text">{{ info.uuid }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">供应商名称:</span><span class="text">{{ info.name }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">供应商手机号码:</span><span class="text">{{ info.mobile }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 1 || info.withdrawType == 2" class="info info-plus">
						<div>
							<span class="label">提现类型:</span>
							<span v-if="info.withdrawType == 1" class="text">微信</span>
							<span v-if="info.withdrawType == 2" class="text">支付宝</span>
							<span v-if="info.withdrawType == 3" class="text">银行卡</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 1 || info.withdrawType == 2" class="info info-plus">
						<div v-if="info.withdrawType == 2">
							<span class="label">支付宝账号:</span><span class="text">{{ info.phone }}</span>
						</div>
						<div v-if="info.withdrawType == 1">
							<span class="label">提现手机号:</span><span class="text">{{ info.phone }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 1 || info.withdrawType == 2" class="info info-plus">
						<div>
							<span class="label">提现金额:</span><span class="text" style="color: #f22c40">{{ info.value }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 3" class="info">
						<div><span class="label">提现类型:</span><span class="text">银行卡</span></div>
						<div>
							<span class="label">开户银行:</span><span class="text">{{ info.bankName }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 3" class="info info-plus">
						<div>
							<span class="label">银行卡号:</span><span class="text">{{ info.phone }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType == 3" class="info">
						<div>
							<span class="label">持卡人姓名:</span><span class="text">{{ info.name }}</span>
						</div>
						<div>
							<span class="label">提现金额:</span><span class="text" style="color: #f22c40">{{ info.value }}</span>
						</div>
					</div>
					<div class="info info-img">
						<div>
							<span class="label">收款二维码:</span>
							<span class="text img">
								<el-image :preview-src-list="[info.qr]" :src="info.qr" :z-index="9999" style="width: 120px; height: 120px"> </el-image>
							</span>
						</div>
					</div>
				</div>
			</div>
		</l-dialog>
	</l-page>
</template>

<script>
import { exportFinanceList2, getFinanceInfo, getFinanceStatistical, getGoodsPayment, getOrderInfo } from '@/api/mall/supplier';
import startEndTime from '@/components/StartEndTime';
import countTo from 'vue-count-to';
import tableMixins from '@/mixins/table';

export default {
	components: { countTo, startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			details: {
				userNumNum: 0,
				memberNum: 0,
			},
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: '',
				mobile: '',
				operation: null,
				orderType: null,
				types: [],
				orderSn: '',
				date: [],
				uuid: null,
			},
			orderOptions2: [
				{ label: '全部', value: undefined },
				{ label: '订单', value: 1 },
				{ label: '订单完成', value: 2 },
				{ label: '提现', value: 3 },
				{ label: '提现拒绝', value: 4 },
				{ label: '退款', value: 5 },
			],
			total: 0,
			loading: false,
			id: null,
			list: [],
			supplierEarnings: 0,
			supplierRefund: 0,
			openDetails: false,
			orderDetails: {
				aftersaleInfo: {},
				goodsInfo: {},
				logisticsInfo: {},
				orderDetail: {},
				userInfo: {},
			},
			openWithdraw: false,
			info: {},
			options: [
				{
					value: '1',
					label: '收入',
					children: [{ value: 1, label: '订单收入' }],
				},
				{
					value: '2',
					label: '支出',
					children: [
						{ value: 5, label: '订单支出' },
						{ value: 2, label: '确认收货' },
					],
				},
			],
		};
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id;
		}
		if (this.$route.query.name) {
			this.name = this.$route.query.name;
		}
		this.getList();
		this.getStatistical();
	},
	methods: {
		cascader(val) {
			if (Array.isArray(val)) {
				this.queryParams.operation = val[val.length - 1];
				return;
			}
			this.queryParams.operation = null;
		},
		handleClose() {
			this.openDetails = false;
			this.openWithdraw = false;
		},
		resetQuery() {
			this.$refs.child.resetTime();
			this.queryParams.operation = null;
			this.$refs.query.resetFields();
			this.query();
		},
		//获取时间
		getTime(startTime, endTime) {
			this.$set(this.queryParams.date, 0, startTime);
			this.$set(this.queryParams.date, 1, endTime);
		},
		query() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		getStatistical() {
			getFinanceStatistical({ userId: this.id }).then((res) => {
				this.details = res.data;
			});
		},
		showDetails(row) {
			if (row.operation == 3 || row.operation == 4) {
				//提现详情
				let obj = {
					userId: row.gainerUuid,
					supplierName: row.supplierName,
					supplierMobile: row.supplierMobile,
					amount: row.amount,
				};
				getFinanceInfo(obj).then((response) => {
					this.id = row.id;
					this.info = response.data;
					this.openWithdraw = true;
				});
				return;
			}
			//订单详情
			let obj = {
				orderSn: row.conent,
				goodsId: row.goodsId,
				normsId: row.normsId,
			};
			getOrderInfo(obj).then((response) => {
				this.orderDetails = response.data;
				if (response.data.logisticsInfo) {
					this.logisticsInfo = response.data.logisticsInfo.result;
				}
				this.openDetails = true;
			});
		},
		getList() {
			let obj = {
				pageNum: this.queryParams.pageNum,
				pageSize: this.queryParams.pageSize,
				startCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[0] : null,
				endCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[1] : null,
				type: this.queryParams.type,
				operation: this.queryParams.operation,
				financeStatus: 1,
				uuid: this.queryParams.uuid,
				supplierName: this.queryParams.supplierName,
				supplierMobile: this.queryParams.supplierMobile,
			};
			getGoodsPayment(obj).then((res) => {
				this.list = res.data.records;
				this.total = res.data.total;
			});
		},
		back() {
			this.$router.back();
		},
		handleSelectionChange() {},
		/** 导出按钮操作 */
		handleExport() {
			let obj2 = {
				pageNum: this.queryParams.pageNum,
				pageSize: this.queryParams.pageSize,
				startCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[0] : null,
				endCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[1] : null,
				type: this.queryParams.type,
				operation: this.queryParams.operation,
				financeStatus: 1,
				uuid: this.queryParams.uuid,
				supplierName: this.queryParams.supplierName,
				supplierMobile: this.queryParams.supplierMobile,
			};
			this.$confirm('是否确认导出数据?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportFinanceList2(obj2);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.withdraw {
	.content-info {
		.title {
			font-size: 16px;
			font-weight: 900;
			margin-bottom: 20px;
			padding-left: 30px;
		}

		.image__preview {
			display: flex;
			justify-content: center;

			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;

			.btn {
				padding: 0;
				font-size: 18px;
				width: 236px;
				height: 60px;
				opacity: 1;
				border-radius: 4px;
				line-height: 60px;
			}
		}

		.info {
			display: flex;
			margin-bottom: 25px;

			> div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;

				.label {
					width: 100px;
					font-size: 12px;
				}

				.text {
					width: 154px;
					background: #f7f7f7;
					font-size: 14px;
					box-sizing: border-box;
					padding-left: 12px;
					border: 1px solid #e5e5e5;
					opacity: 1;
					border-radius: 4px;
				}

				.img {
					background: #ffffff;
					border: none;
				}
			}
		}

		.info-img {
			height: 140px;

			.text {
				height: 140px;
				padding-left: 0px !important;
			}
		}

		.info-plus {
			> div {
				width: 100%;

				.text {
					width: 416px;
					//color: #F14A46;
				}
			}
		}
	}
}

.content {
	padding-bottom: 31px;
	color: #333333;

	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.content-info {
		display: flex;
		padding: 11px 16px;
		border: 1px dashed #cccccc;
		border-radius: 10px;
		margin-top: 16px;

		.info2 {
			padding-left: 23px;
			position: relative;
		}

		.info {
			width: 33.33%;

			> div {
				//margin-top: 10px;
				padding: 5px 0;
			}
		}
	}
}

.container {
	padding: 20px 24px;

	.content {
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 0px;

		.title {
			//height: 87px;
			//display: flex;
			margin-bottom: 10px;

			.text {
				height: 36px;
				line-height: 36px;
				font-weight: 900;
				font-size: 18px;
				padding-right: 24px;
			}
		}
	}

	.header {
		height: 131px;
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 0px;
		display: flex;
		align-items: center;
		padding: 0 20px;

		.info-message {
			display: flex;

			.box1 {
				background: url('../../../assets/images/ic_6093.png') no-repeat;
				background-size: 100% 100%;
			}

			.box2 {
				background: url('../../../assets/images/ic_6095.png') no-repeat;
				background-size: 100% 100%;
			}

			.box {
				width: 208px;
				height: 91px;
				//background: #215ACD;
				opacity: 1;
				border-radius: 20px;
				color: #ffffff;
				text-align: center;
				overflow: hidden;
				margin-right: 24px;

				.num {
					font-size: 24px;
					font-weight: 300;
					margin-top: 17px;
				}

				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 8px;
				}
			}
		}
	}

	.btn-return {
		width: 92px;
		height: 30px;
		background: #6373ee;
		opacity: 1;
		border-radius: 20px;
		display: flex;
		color: #ffffff;
		font-size: 14px;
		line-height: 30px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);

		img {
			display: block;
			width: 15px;
			flex-shrink: 0;
			height: 14px;
			margin-right: 6px;
		}
	}
}
</style>
